* {
    padding: 0;
    margin: 0; /* Added margin reset */
    border: 0;
    box-sizing: border-box;
}

.Body {
    padding: 100px 80px;
}

    .Body h1 {
        font-family: Arial;
        color: #006699;
        padding: 30px;
        text-align: center;
    }

    .Body hr {
        border: 3px solid #8ceded; /* Horizontal line style */
        margin: 10px 0;
    }
    
    .Body p{
        font-size: medium;
        padding:10px;
    }

    .Body a{
        color:black;
        text-decoration:none;
    }

.intro {
    margin: 30px; /* Remove default margin */
    display: flex; /* Use Flexbox */
    justify-content: center; /* Center horizontally */
    position: relative; /* Allow absolute positioning of children */
}

    .intro .info {
        position: relative; /* Positioning context for the image and overlay text */
    }

    .info p {
        color:white;
    }

    .intro img {
        width: 100%; /* Makes the image responsive */
        height: 100%; /* Maintains aspect ratio */
    }

.Itext{
    text-align:center;
}

.top-left {
    position: absolute; /* Allows free positioning over the image */
    top: 10px; /* Adjust as needed */
    left: 10px; /* Adjust as needed */
    color: white; /* Text color */
    background: #006699; /* Semi-transparent background for readability */
    padding: 10px; /* Padding around text */
}
    .top-left p{
        font-size:xx-large;
    }

.intro .Itext {
    max-width: 600px; /* Limit the width of the text block */
    padding: 20px; /* Add padding around the text section */
}

.Body h2 {
    margin-top: 20px;
    font-family: Arial;
    color: #00A4F7;
}

.intro p {
    margin: 10px 0 0;
    font-size: large; /* Add margin to the paragraph */
}

.RightP {
    display: flex;
    justify-content: center; /* Center horizontally */
}

.Rtext {
    flex: 1; /* Allow the text to take up remaining space */
}

img {
    max-width: 100%; /* Make sure the image is responsive */
    height: auto; /* Maintain aspect ratio */
}
.LeftP {
    margin: 30px; /* Remove default margin */
    display: flex; /* Use Flexbox */
    justify-content: center; /* Center horizontally */
}

    .LeftP img {
        max-width: 150%; /* Adjust the width as needed */
        margin-right: 20px; /* Space between image and text */
    }

.Container {
    box-sizing: border-box;
    padding: 40px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between,center;
}

    .Container p {
        font-size: medium;
        margin: 10px 0 0;
    }

.Performance, .Quality, .Support {
    flex: 1 1 33.3%; 
    padding: 25px;
    text-align:center;
}

    .Support p:hover {
        cursor:pointer;
        text-decoration:underline #006699;
    }

        @media (max-width: 768px) {
            .intro, .LeftP {
                flex-direction: column; /* Stack elements on smaller screens */
                align-items: center; /* Center-align items */
            }

            .intro{
                margin:0;
            }

            img {
                margin-right: 0; /* Remove right margin on small screens */
            }

            .top-left p {
                font-size: small;
            }

            .RightP {
                flex-direction: column; /* Stack items vertically */
                align-items: flex-start; /* Align items to the start */
                justify-content: center; /* Center horizontally */
            }

                .RightP img {
                    margin-top: 10px;
                    order: -1;
                }

            .Rtext, .Ltext {
                padding-right: 0; /* Remove padding on small screens */
                text-align: center; /* Center-align text on small screens */
            }
        }